<template>
    <my-loading v-if="loading"/>
    <div class="health" v-else>
        <hasData v-if="showData" :opacity="opacity" :healthData="healthData" />
        <noData v-else/>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import hasData from './components/has-data.vue'
import noData from './components/no-data.vue'
import setTab from '@/functions/useSetTab'
import  {onShow, onPageScroll}  from "@dcloudio/uni-app"
import Api from '@/service'
import useLogin from "@/functions/useLogin";

const loginS = useLogin();
const loading = ref(true)
const showData = ref(false)
const opacity = ref(0)
const isLogin = ref(false)

onPageScroll(data=>{
    if (data.scrollTop < 50) {
      opacity.value = "0";
    }
    if (data.scrollTop >= 50 && data.scrollTop <= 100) {
      opacity.value = `${(data.scrollTop - 50) / 50}`;
    }
    if (data.scrollTop > 100) {
      opacity.value = "1";
    }
})

const healthData = ref({})
const init = async (userId) => {
  const res = await Api.healthy.getLatestReportHome(userId)// 80
  healthData.value = res.data
  console.log('healthData',res.data)
  loading.value = false
  if(res.data){
    showData.value = true
  }else{
    showData.value = false
  }
}

onShow(async()=>{
  setTab(2)
  const flag = await loginS.checkLogin(true);
  isLogin.value = flag
  if(flag){
    const userId = loginS.userInfo.value?.userId
    init(userId)
  }else{
    showData.value = false
    loading.value = false
  }
})
</script>

<style scoped>
</style>